<template>
	<view class="container">
		<!-- 轮播图 -->
		<view class="uni-padding-wrap">
			
					<swiper class="swiper" :indicator-dots="indicatorDots" :autoplay="autoplay" :interval="interval" :duration="duration"
					 @change="changeSwiper">
							<block  v-for="(item,index) in lists" :key='index'>
						
							 <swiper-item >
									<!-- <image src='../../../static/home/1.jpg' mode=""></image>	 -->
									<image :src="item.picAddr" mode=""></image>
							 </swiper-item>
					
							</block>
						
					</swiper>

					<!-- //指示点 -->
					<view class="dots">
						<block v-for="(item,index) in lists.length" :key="item">
							<view class="dot" :class="index==swiperCurrent ? ' active' : ''"></view>
						</block>
					</view>
			
		</view>


		<!-- 轮播图end -->

	</view>
</template>

<script>
	import {getBanner} from "@/api/index.js"
	export default {
		data() {
			return {
				background: ['color1', 'color2', 'color3'],
				indicatorDots: false,
				autoplay: true,
				interval: 2000,
				duration: 500,
				current: 0,
				swiperCurrent: 0,
				lists:[			
					{
						picAddr:'https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1605020118170&di=5732e01b16c71a85c06093f53d47b207&imgtype=0&src=http%3A%2F%2Fclubimg.club.vmall.com%2Fdata%2Fattachment%2Fforum%2F201304%2F04%2F211707kmiziaaaik63aa9a.jpg'
					}
				]//图片列表

			}
		},
		methods: {
			changeSwiper(e) {
				this.swiperCurrent = e.detail.current;
			},
			//获取banner 
			getbanner(){
				let that = this
				getBanner().then(res=>{
					// console.log(res)
					that.lists = res[1].data.data
					
				}).catch(err=>{
					console.log(err)
				})
			}
		},
		created() {
			this.getbanner()
		}
	}
</script>

<style scoped lang="less">
	
	.container {
		position: relative;
		// width: 100%;
		
		.uni-padding-wrap{
			height: 420rpx;
			width: 100%;
			
			.swiper{
				width: 100%;
				height: 100%;
				
				image{
					width: 100%!important;
					height: 100%;
				}
			}
		
			
		}
		.dots {
			position: absolute;
			bottom: 77rpx;
			left: 50%;
			// 这里一定要注意兼容不然很可能踩坑          
			transform: translate(-50%, 0);
			-webkit-transform: translate(-50%, 0);
			z-index: 99;
			display: flex;
			flex-direction: row;
			justify-content: center;
			

			.dot {
				width: 20rpx;
				height: 6rpx;
				border-radius: 3rpx;
				background: rgba(255, 255, 255, 1);
				margin-right: 10rpx;
			}
			.active {
				width: 20rpx;
				height: 6rpx;
				border-radius: 3rpx;
				background: #00C6C2;
			}
		}
	}
</style>
